<template>
  <div class="appointmentMap">
      <div class="top">
          <div class="back" @click="$router.back()">
              <yd-icon name="back" slot="icon" custom  size=".3rem" color="#FFffff"></yd-icon>
                    返回
          </div>
          <div class="title">
              {{whoJump.event}}
          </div>
          <div class="detail" @click="$router.push({path:'/appointment/list'})"> 
              详情
          </div>
      </div>
      <!-- 地图  -->
        <baidu-map class="map" :center="{lng: whoJump.lng, lat: whoJump.lat}" :zoom="11">
            <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
            <bm-marker :position="{lng: whoJump.lng, lat: whoJump.lat}" :dragging="true" animation="BMAP_ANIMATION_BOUNCE" @click="info">
                <!-- <bm-label :content="whoJump.site" :labelStyle="{color: 'red', fontSize : '12px'}" :offset="{width: -50, height: 30}"/> -->
                <bm-info-window :show="show" @close="show=false" @open="show=true">
                    <p>
                        {{whoJump.appointStartTime}}———{{whoJump.appointEndTime}}
                    </p>
                    <p>
                       {{whoJump.site}} 
                    </p>
                    <p>
                        目前共{{whoJump.appointMembers.length}}人参加
                    </p>
                </bm-info-window>
            </bm-marker>
            <over-flow v-for="(map,index) in mapdata" :key="index"
             :position="{lng: map.lng, lat:map.lat} " 
             :user="map.user"
             > 
            </over-flow>
        </baidu-map>
  </div>
</template>
<script>
import overFlow from "@/components/map/appointOverflow"
export default {
  data(){
      return{
          show:false,//信息窗
      }
  },
  components:{overFlow},
  computed:{
      whoJump(){
          return this.$store.state.choseGroup
      },
      mapdata(){
          return this.$store.state.mapdata
      }      
  },
  methods:{
      info(){//信息窗显示隐藏
          this.show=!this.show
      }
  }
}
</script>
<style lang="less" scoped>
  @import "~less/base";
  .appointmentMap{
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      .top{//导航
          height: 1rem;
          line-height: 1rem;
          background-color: @background-a;
          display: flex;
          color: @color-t;
          font-size: .3rem;
          .back{
              flex:0 0 20%;
              text-align: center;
          }
          .title{
              text-align: center;
              flex:0 0 60%;
          }
          .detail{
              flex:0 0 20%;
              text-align: center;
          }
      }
      .map{
          position: absolute;
          top: 1rem;
          bottom: 0;
          width: 100%;
      }
  }
</style>
